<template>
    <view class="bottom">
        <Header></Header>
        <view class="back">
            <u-icon style="border: 1px #00eaff solid;border-radius: 50%;margin-left: 50rpx;margin-right: 20rpx"
                    name="arrow-left" color="#00eaff" @click="back"></u-icon>
            <text style="color: #00eaff;padding-right: 30rpx">Help</text>
        </view>
        <view v-for="(problem,index) in problemList" :key="index">
            <uni-section :title="problem.name" type="line" titleColor="#ffffff">
                <uni-collapse accordion v-for="(item,index) in problem.list" :key="index">
                    <uni-collapse-item :title="item.title">
                        <view class="content" style="background-color: #0f0e2d;color: #ffffff">
                            <u-parse :html="item.content"></u-parse>
                        </view>
                    </uni-collapse-item>
                </uni-collapse>
            </uni-section>
        </view>
        <custom-tabbar></custom-tabbar>
    </view>
</template>

<script>
import Header from "@/components/header/header.vue";
import CustomTabbar from "@/components/tabbar/tabbar.vue";

export default {
    name: "help",
    components: {
        CustomTabbar,
        Header
    },
    data() {
        return {
            problemList: []
        };
    },
    onShow() {
        this.getProblemList()
    },
    methods: {
        // 返回
        back() {
            this.$u.route('/pages/my/my');
        },
        // 获取问题列表
        getProblemList() {
            this.$u.api.getProblemList().then(res => {
                if (res.code === 1) {
                    this.problemList = res.data
                }
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.back {
    line-height: 100rpx;
    //margin-left: 30rpx;
    color: white;
    font-size: 34rpx;
    background-image: url("@/static/images/header-bg.png");
    background-size: cover;
    height: 100rpx;
}

.content {
    padding: 15px;
}

::v-deep.uni-section {
    background-color: #0f0e2d;

    ::v-deep .uni-collapse {
        background-color: #0f0e2d;


    }

}

::v-deep .uni-collapse-item__title-box {
    background-color: #0f0e2d;
    color: #ffffff;
}

::v-deep .uni-collapse-item__title {
    background-color: #0f0e2d;
    color: #ffffff;
}

</style>
